<template>
	<view class="page">
    <view class="page-navbar" :style="'background-image: url('+indexBg+');'">
      <u-navbar :fixed="false" title="员工管理" placeholder bgColor="transparent"></u-navbar>
    </view>
    <view class="tabs-box">
      <view class="tabs-item" :class="{active: selectTab == '基础信息'}" @click="selectTab='基础信息'">基础信息</view>
      <view class="tabs-item" :class="{active: selectTab == '员工信息'}" @click="selectTab='员工信息'">员工信息</view>
      <view class="tabs-item" :class="{active: selectTab == '教育经历'}" @click="selectTab='教育经历'">教育经历</view>
      <view class="tabs-item" :class="{active: selectTab == '工作经历'}" @click="selectTab='工作经历'">工作经历</view>
    </view>
    <view class="form-info">
      <template v-if="selectTab == '基础信息'">
        <view class="form-box u-m-b-48">
          <view class="form-info-title">基础信息</view>
          <view class="form-item">
            <view class="form-lable">照片</view>
            <view class="form-content-right">
              <u-upload
                :fileList="form.url"
                accept='image'
                name="url"
                :sizeType="['compressed']"
                :maxCount="1"
                @delete="deletePic($event, 'form')"
                @afterRead="afterRead($event, 'form')"
                :previewFullImage="true"
              ></u-upload>
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable required">员工姓名</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.staffName" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable required">所属部门</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.deptName" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable required">岗位</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.post" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable required">身份证号</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="form.idCard" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable required">手机号码</view>
            <view class="form-content">
              <u--input type="number" :readonly="id" placeholder="请输入" maxlength="11" border="none" inputAlign="right" v-model="form.tel" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable required">劳动合同到期时间</view>
            <view class="form-content" @click="datePickerType=['form', 'contractExpirationTime']">
              <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="form.contractExpirationTime" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable required">入职日期</view>
            <view class="form-content" @click="datePickerType=['form', 'emplDate']">
              <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="form.emplDate" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">历史工龄(年)</view>
            <view class="form-content">
              <u--input type="number" placeholder="请输入" border="none" inputAlign="right" v-model="form.seniority" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">性别</view>
            <view class="form-content" @click="dictType = 'sys_user_sex';dictName=['form', 'sex']">
              <u--input placeholder="请输入" readonly border="none" inputAlign="right" v-model="form.sex" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">出生日期</view>
            <view class="form-content" @click="datePickerType=['form', 'birthDate']">
              <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="form.birthDate" />
            </view>
          </view>
        </view>
        <view class="form-box u-m-b-48">
          <view class="form-item">
            <view class="form-lable">状态</view>
            <view class="form-content-right">
              <view class="u-flex">
                <view class="u-m-r-16" style="color: #138E88;">{{ form.status }}</view>
                <u-switch v-model="form.status" activeColor="#2b8e88" activeValue="在职" inactiveValue="离职" size="20"></u-switch>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="selectTab == '员工信息'">
        <view class="form-box u-m-b-48">
          <view class="form-info-title">员工信息</view>
          <view class="form-item">
            <view class="form-lable">证件姓名</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.cardName" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">民族</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.nation" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">户口类型</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.accountType" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">户口所在地</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.accountAddress" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">籍贯</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.nativePlace" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">最高学历</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.highestDegree" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">政治面貌</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.politics" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">婚姻状况</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.marital" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">微信号</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.wechat" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">个人邮箱</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.email" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">有无刑事犯罪记录</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.izPenal" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">与前单位有无劳动争议或竞业限制</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="gwStaffBase.izDisputed" />
            </view>
          </view>
        </view>
      </template>
      <template v-if="selectTab == '教育经历'">
        <view class="form-box u-m-b-48" v-for="(item, index) in gwStaffEducations" :key="index">
          <view class="form-info-title">教育经历({{ index + 1 }})</view>
          <view class="form-item">
            <view class="form-lable">学校名称</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.schoolName" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">专业名称</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.major" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">入校日期</view>
            <view class="form-content" @click="datePickerType=['gwStaffEducations', 'enterDate', index]">
              <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="item.enterDate" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">毕业日期</view>
            <view class="form-content" @click="datePickerType=['gwStaffEducations', 'graduationDate', index]">
              <u--input placeholder="请选择" readonly border="none" inputAlign="right" v-model="item.graduationDate" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">学历</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.education" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">是否取得学位</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.izGet" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">证书照片</view>
            <view class="form-content-right">
              <u-upload
                :fileList="item.url"
                accept='image'
                name="url"
                :sizeType="['compressed']"
                :maxCount="1"
                @delete="deletePic($event, 'gwStaffEducations', index)"
                @afterRead="afterRead($event, 'gwStaffEducations', index)"
                :previewFullImage="true"
              ></u-upload>
            </view>
          </view>
        </view>
        <view class="add-btn" @click="gwStaffEducations.push({})">
          <image src="https://gowork365.com/prod-api/profile/mini/company/addList.png" />
          <text>添加内容</text>
        </view>
        <view class="add-btn u-m-t-28" style="color: #FE748B;" v-if="gwStaffEducations.length > 1" @click="gwStaffEducations.pop()">
          <image src="https://gowork365.com/prod-api/profile/mini/company/action5.png" />
          <text>删除内容</text>
        </view>
      </template>
      <template v-if="selectTab == '工作经历'">
        <view class="form-box u-m-b-48" v-for="(item, index) in gwStaffWorks" :key="index">
          <view class="form-info-title">工作经历({{ index + 1 }})</view>
          <view class="form-item">
            <view class="form-lable">公司名称</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.company" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">担任职位</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.post" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">入职日期</view>
            <view class="form-content" @click="datePickerType=['gwStaffWorks', 'emplDate', index]">
              <u--input placeholder="请输入" readonly border="none" inputAlign="right" v-model="item.emplDate" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">离职日期</view>
            <view class="form-content" @click="datePickerType=['gwStaffWorks', 'resignDate', index]">
              <u--input placeholder="请输入" readonly border="none" inputAlign="right" v-model="item.resignDate" />
            </view>
          </view>
          <view class="form-item">
            <view class="form-lable">职位描述</view>
            <view class="form-content">
              <u--input placeholder="请输入" border="none" inputAlign="right" v-model="item.postDesc" />
            </view>
          </view>
        </view>
        <view class="add-btn" @click="gwStaffWorks.push({})">
          <image src="https://gowork365.com/prod-api/profile/mini/company/addList.png" />
          <text>添加内容</text>
        </view>
        <view class="add-btn u-m-t-28" style="color: #FE748B;" v-if="gwStaffWorks.length > 1" @click="gwStaffWorks.pop()">
          <image src="https://gowork365.com/prod-api/profile/mini/company/action5.png" />
          <text>删除内容</text>
        </view>
      </template>
      <view class="save-primary-btn-actions">
        <view class="save-primary-l-btn" @click="sendStaff" v-if="!id">发送给员工填写</view>
        <view class="save-primary-r-btn" @click="submit">保存提交</view>
      </view>
    </view>
    <u-datetime-picker :minDate="60" v-model="defaultDateVal" :show="datePickerType.length" @confirm="datePickerConfirm" mode="date"></u-datetime-picker>
    <u-picker :show="dictType!=''" :columns="[dict[dictType]]" keyName="lable" @confirm="pickerConfirm" @cancel="dictType = ''"></u-picker>
  </view>
</template>

<script>
import { getStaff, addByStaff, addStaff, updateStaff } from '@/api/index'
import { uploadImage, formatTimeTwo, phoneReg, isObjectNonEmpty } from '@/common/util'

export default {
  data() {
    return {
      indexBg: 'https://gowork365.com/prod-api/profile/mini/index/indexBg1.png',
      dictType: '',
      dictName: [],
      dict: {},
      selectTab: '基础信息',
      id: '',
      form: {
        staffName: '',
        deptName: '',
        post: '',
        idCard: '',
        tel: '',
        contractExpirationTime: '',
        emplDate: '',
        status: '在职',
      },
      defaultForm: {
        staffName: '',
        deptName: '',
        post: '',
        idCard: '',
        tel: '',
        contractExpirationTime: '',
        emplDate: '',
        status: '',
      },
      gwStaffBase: {},
      gwStaffEducations: [],
      gwStaffWorks: [],
      defaultDateVal: new Date(),
      datePickerType: [],
    }
  },
  onLoad(options) {
    this.getDicts(['sys_user_sex'], this)
    if(options.id) {
      this.id = options.id
      this.getForm()
    } else {
      this.gwStaffEducations = [{ }]
      this.gwStaffWorks = [{ }]
    }
  },
  watch: {
    datePickerType(n) {
      if(!n.length) {
        this.defaultDateVal = new Date()
      }
    }
  },
  methods: {
    getForm() {
      uni.showLoading({ mask: true })
      getStaff(this.id).then(response => {
        uni.hideLoading()
        if(response.data.url) {
          response.data.url = [ 
            {
              status: "success",
              id: this.id,
              img: this.baseUrl + response.data.url,
              type: 'url',
              url: this.baseUrl + response.data.url
            }
          ]
        }
        this.form = response.data;
        this.gwStaffBase = response.data.gwStaffBase || {};
        response.data.gwStaffWorks.forEach(v => {
          if(v.url) {
            v.url = [ 
              {
                status: "success",
                id: v.id,
                img: this.baseUrl + v.url,
                type: 'url',
                url: this.baseUrl + v.url
              }
            ]
          }
        })
        this.gwStaffWorks = response.data.gwStaffWorks;
        response.data.gwStaffEducations.forEach(v => {
          if(v.url) {
            v.url = [ 
              {
                status: "success",
                id: v.id,
                img: this.baseUrl + v.url,
                type: 'url',
                url: this.baseUrl + v.url
              }
            ]
          }
        })
        this.gwStaffEducations = response.data.gwStaffEducations;
      });
    },
    submit() {
      const that = this
      let formFlag = false
      for(let key in this.defaultForm) {
        if(this.form[key] === '') {
          formFlag = true
        }
      }
      if(formFlag) {
        uni.showToast({
          icon: 'none',
          title: '请完善基础信息'
        })
        this.selectTab = '基础信息'
        return
      }
      if(!phoneReg(this.form.tel)) {
        return
      }
      const gwStaffWorks = []
      this.gwStaffWorks.forEach(v => {
        if(v.url) {
          v.url = v.url.map(v => v.url.replace(this.baseUrl, "")).join()
        }
        if(isObjectNonEmpty(v)) {
          gwStaffWorks.push(v)
        }
      })
      const gwStaffEducations = []
      this.gwStaffEducations.forEach(v => {
        if(v.url) {
          v.url = v.url.map(v => v.url.replace(this.baseUrl, "")).join()
        }
        if(isObjectNonEmpty(v)) {
          gwStaffEducations.push(v)
        }
      })
      const params = {
        ...this.form,
        gwStaffBase: this.gwStaffBase,
        gwStaffWorks: this.gwStaffWorks,
        gwStaffEducations: this.gwStaffEducations,
      }
      if(params.url) {
        params.url = this.form.url.map(v => v.url.replace(this.baseUrl, "")).join()
      }
      uni.showLoading({ mask: true })
      if (this.form.id != null) {
        updateStaff(params).then(response => {
          uni.hideLoading()
          uni.showToast({
            icon: 'none',
            title: '修改成功'
          })
          setTimeout(() => {
            that.goBack(1)
          }, 1000)
        });
      } else {
        addStaff(params).then(response => {
          uni.hideLoading()
          uni.showToast({
            icon: 'none',
            title: '新增成功'
          })
          setTimeout(() => {
            that.goBack(1)
          }, 1000)
        });
      }
    },
    sendStaff() {
      const that = this
      let formFlag = false
      for(let key in this.defaultForm) {
        if(this.form[key] === '') {
          formFlag = true
        }
      }
      if(formFlag) {
        uni.showToast({
          icon: 'none',
          title: '请完善基础信息'
        })
        this.selectTab = '基础信息'
        return
      }
      if(!phoneReg(this.form.tel)) {
        return
      }
      const params = {
        ...that.form,
      }
      uni.showLoading({ mask: true })
      addByStaff(params).then(response => {
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: '发送成功'
        })
        setTimeout(() => {
          that.goBack(1)
        }, 1000)
      });
    },
    datePickerConfirm(e) {
      if(this.datePickerType.length == 2) {
        this[this.datePickerType[0]][this.datePickerType[1]] = formatTimeTwo(e.value, 'Y-M-D')
      } else {
        const info = this[this.datePickerType[0]][this.datePickerType[2]]
        info[this.datePickerType[1]] = formatTimeTwo(e.value, 'Y-M-D')
        this.$set(this[this.datePickerType[0]], this.datePickerType[2], info)
      }
      this.datePickerType = []
    },
    deletePic(event, name, index=-1) {
      if(index > -1) {
        const info = this[name][index]
        info[event.name].splice(event.index, 1)
        this.$set(this[name], index, info)
        return
      }
      this[name][event.name].splice(event.index, 1);
    },
    // 新增图片
    async afterRead(event, name, index=-1) {
      let lists = [].concat(event.file);
      for (let i = 0; i < lists.length; i++) {
        const res = await uploadImage(lists[0]);
        if(res.code != 200) {
          return
        }
        if(index > -1) {
          const info = this[name][index]
          info[event.name] = [
            {
              status: "success",
              id: res.newFileName,
              img: res.fileName,
              type: event.name,
              url: this.baseUrl + res.fileName
            }
          ]
          this.$set(this[name], index, info)
          return
        } else {
          const img = [
            {
              status: "success",
              id: res.newFileName,
              img: res.fileName,
              type: event.name,
              url: this.baseUrl + res.fileName
            }
          ]
          this.$set(this[name], event.name, img)
        }
      }
    },
    pickerConfirm(e) {
      if(e.value[0].lable) {
        this[this.dictName[0]][this.dictName[1]] = e.value[0].lable
      } else {
        this[this.dictName[0]][this.dictName[1]] = ''
      }
      this.dictType = ''
      this.dictName = []
    },
  }
}
</script>

<style lang="less" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: #F4F7F6;
  position: relative;
  padding-bottom: 188rpx;
  display: flex;
  flex-direction: column;
  .page-navbar {
    background-repeat: no-repeat;
    background-size: 750rpx 690rpx;
  }
  .form-info {
    flex: 1;
    .add-btn {
      width: 686rpx;
      height: 104rpx;
      background: #FFFFFF;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8rpx;
      font-family: PingFangSC, PingFang SC;
      font-size: 28rpx;
      color: rgba(0,0,0,0.85);
      margin: 0 auto 56rpx;
      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
  .tabs-box {
    width: 686rpx;
    height: 96rpx;
    background: #FFFFFF;
    border-radius: 48rpx;
    display: flex;
    margin: 32rpx auto 0;
    .tabs-item {
      flex: 1;
      height: 96rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 48rpx;
      border: 2rpx solid #fff;
    }
    .active {
      border: 2rpx solid #138E88;
      background: #E9F8F6;
      color: #138E88;
    }
  }
}
</style>
